<template>
  <view class="component add-modal choose-goods-add-modal">
    <up-modal
      :show="visible"
      :closeOnClickOverlay="true"
      :showConfirmButton="true"
      :showCancelButton="true"
      confirmText="确定"
      @confirm="handleConfirm"
      @cancel="close"
    >
      <!-- 您当前还有未完成盘点的任务，请确认是否继续盘点？ -->
      <view class="wrapper">
        <view class="product-area">
          <ProductInfoView type="view"></ProductInfoView>
        </view>
        <view class="block">
          <view class="block-title">仓库</view>
          <view class="block-content">
            <!-- <view class="tab">
              <view class="ui-button">仓库1号</view>
            </view> -->
            <TabView
              v-model="addData.store"
              :data="[{name: '仓库1号', value: '1'}, {name: '仓库2号', value: '2'}]"
            ></TabView>
          </view>
        </view>
        <view class="block">
          <view class="block-title">盘点数（个）</view>
          <view class="block-content">
            <NumberBox v-model="addData.countNumber"></NumberBox>
          </view>
        </view>
      </view>
    </up-modal>
  </view>
</template>

<script setup lang="ts">
import { ROUTE } from '@/constant/constant';
import ProductInfoView from '@/components/base-components/product-info-view/product-info-view.vue';
import { ComponentInternalInstance } from 'vue';
import TabView from '@/components/base-components/tab-view/tab-view.vue';
import NumberBox from '@/components/base-components/number-box/number-box.vue';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  }

})

const emit = defineEmits(['update:modelValue', 'update:visible', 'onConfirm']);
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const storeTab = ref(1); // 仓库
const countNumber = ref(0); // 盘点数
const addData = reactive({
  store: 2,
  countNumber: 3,
});

// 确认添加
const handleConfirm = () => {
  emit('onConfirm', addData);
  close();
}

function close () {
  emit('update:visible', false);
}

watch(storeTab, (newVal) => {
  console.log("🚀 ~ watch ~ newVal:", newVal)
})

</script>

<style lang="scss" scoped>
@import "@/static/scss/theme.scss";
.add-modal {
  ::v-deep {
    .u-modal__content {
      padding: 0;
    }
  }
}

.wrapper {
  flex: 1;
}

.add-modal {
  .product-area {
    padding: 32rpx 32rpx 24rpx 24rpx;
  }
}



.block {
  padding: 0 32rpx;
  
  &+.block {
    margin-top: 40rpx;
  }

  &-title {
    font-size: 26rpx;
    line-height: 32rpx;
    margin-bottom: 16rpx;
  }

  &:last-child {
    margin-bottom: 32rpx;
  }
  
}

.u-modal__button-group {
  
}
</style>
